<template>
	<div class="padding">
		<div class="flex align-center">
			<!--日期选择-->
			<el-date-picker
				v-model="dateArray"
				type="daterange"
				range-separator="-"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				value-format="yyyy-MM-dd"
				size="large"
				@change="dateChange"
			></el-date-picker>
			<!--类型下拉-->
			<el-select class="margin-lr-sm" v-model="selectValue" size="large" placeholder="请选择" @change="selectChange">
				<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<!--成本汇总-->
			<div class="cost-block bg-gray radius-15 margin-lr-sm text-sm text-nowarp" v-for="(item, index) of costArray" :key="`cost_${index}`">
				<span>{{ item.label }}:</span>
				<!--总价-->
				<span class="text-orange padding-left-xs">
					<span class="text-lg">{{ item.totalPrice }}</span>
					<span>元</span>
				</span>
				<!--单价-->
				<span class="padding-left-xs">
					<span>{{ item.unitPrice }}</span>
					<span>/{{ item.unit }}</span>
				</span>
			</div>
		</div>
		<div class="margin-top">
			<!--成本列表-->
			<div v-for="(item, index) of datas" :key="`datas_${index}`">
				<!--数据卡片-->
				<div class="shadow-box-gray padding radius-15 flex width-p-100">
					<!--图片-->
					<div class="card-img"><img :src="item.picUrl || require('../../../../../assets/img/expertiseBg.jpeg')" alt="" /></div>
					<!--信息-->
					<div class="margin-left width-p-100 flex flex-direction justify-between padding-tb-xs">
						<!--第一行-->
						<div class="flex justify-between align-center">
							<!--名称-->
							<div class="text-bold">{{ item.materialName }}</div>
							<!--日期-->
							<div class="text-gray">{{ item.gmtCreate }}</div>
						</div>
						<!--第二行-->
						<div class="flex justify-between align-center">
							<!--规格,单价-->
							<div class="text-sm">
								<!--农资专用-->
								<div v-if="item.materialFlag === '1'">
									<span class="card-tag padding-xs padding-lr-sm round text-weight-5">{{ item.specs }}{{ item.meteringUnit }}/{{ item.unit }}</span>
									<span class="card-tag padding-xs padding-lr-sm round text-weight-5 margin-left-xs">{{ item.nz_unit }}/亩</span>
								</div>
								<!--农机-->
								<div v-else-if="item.materialFlag === '2'">
									<span class="card-tag padding-xs padding-lr-sm round text-weight-5">{{ item.unit }}</span>
								</div>
							</div>
							<!--投入量/投入时长-->
							<div class="text-sm">
								共
								<span class="text-bold text-df margin-lr-xs">{{ item.qty }}</span>
								件
							</div>
						</div>
						<!--第三行-->
						<div class="flex justify-between align-center text-sm">
							<!--总额-->
							<div class="text-lg text-bold text-orange text-bold text-price">{{ item.total_price }}</div>
							<!--总额-->
							<div class="">
								农资总额:
								<span class="text-lg text-bold text-orange text-bold text-price margin-left-xs">{{ item.total_price }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 投入明细接口
import api from '@/api/putinto.js';
/**
 * 农事管理-详情-投入明细tab
 */
export default {
	data() {
		return {
			datas: [], // 投入明细集
			dateArray: [], // 选择的日期范围组[开始日期,结束日期]
			// select下拉选择类型
			types: [
				{ label: '全部', value: 'getAgricultureMassif' }, // 地块成本
				{ label: '农资成本', value: 'getAgricultureAssets' },
				{ label: '农机成本', value: 'getAgricultureMachinery' }
			],
			selectValue: null, // select 下拉选项的value
			landInfo: null, // 地块详情 来源: massifDetails.vue => setDetailInfo()fff
			// 成本汇总集 {label,总价,单价,单位}
			costArray: [
				{ label: '当前成本', totalPrice: 0, unitPrice: 0, unit: '亩' },
				{ label: '农资成本', totalPrice: 0, unitPrice: 0, unit: '亩' },
				{ label: '农机成本', totalPrice: 0, unitPrice: 0, unit: '亩' }
			]
		};
	},
	methods: {
		// 选择日期范围
		async dateChange(e) {
			this.dateArray = e;
			await this.getDatas();
		},
		// 类型下拉
		async selectChange(e) {
			console.log('e', this.selectValue);
			await this.getDatas();
		},
		// 地块成本汇总
		async getSummary() {
			// 请求参数
			const params = this.getParams();
			// 发送请求
			await api.getAgricultureCostSum(params).then(res => {
				console.log('地块成本汇总', res);
				if (res.data.code === 200) {
					const datas = res.data.rows;
					// const datas = [{ materialType: '1', total: 12345, plantArea: 100.35 }, { materialType: '2', total: 500000, plantArea: 90.1 }];
					if (datas && datas.length > 0) {
						// 农资,农机单价,成本总额
						let nz_unit_price,
							nj_unit_price,
							total_price = 0;
						// 农资成本
						const nz = datas.filter(f => f.materialType === '1')[0];
						if (nz) {
							// number类型计算
							total_price += nz.total;
							// 总额转为千分位计数字符串
							this.costArray[1].totalPrice = this.$utils.priceFormat(nz.total);
							// number类型计算
							nz_unit_price = nz.plantArea ? nz.total / nz.plantArea : 0;
							// 单价保留两位小数,转为千分位计数字符串
							this.costArray[1].unitPrice = this.$utils.priceFormat(nz_unit_price.toFixed(2));
						}
						// 农机成本
						const nj = datas.filter(f => f.materialType === '2')[0];
						if (nj) {
							total_price += nj.total;
							this.costArray[2].totalPrice = this.$utils.priceFormat(nj.total);
							nj_unit_price = nj.plantArea ? nj.total / nj.plantArea : 0;
							this.costArray[2].unitPrice = this.$utils.priceFormat(nj_unit_price.toFixed(2));
						}
						// 当前成本
						this.costArray[0].totalPrice = this.$utils.priceFormat(total_price);
						this.costArray[0].unitPrice = this.$utils.priceFormat((nz_unit_price + nj_unit_price).toFixed(2));
					}
				} else {
					this.$message({
						showClose: true,
						message: res.data.msg,
						type: 'error'
					});
				}
			});
		},
		// 获取投入明细
		getDatas() {
			if (!this.landInfo) {
				this.$message({
					showClose: true,
					message: '地块信息获取错误',
					type: 'error'
				});
				return;
			}
			// 请求参数
			const params = this.getParams();
			// 发送请求
			api[`${this.selectValue}`](params).then(res => {
				console.log('获取投入明细', res);
				if (res.data.code === 200) {
					this.datas = res.data.rows;
					// this.datas = [
					// 	{
					// 		materialFlag: '1', //物质类型（"1"=农资，"2"=农机） 字符串
					// 		id: '001', //唯一标识（出库明细ID） 整型
					// 		tenantId: '001', //租户ID 字符串
					// 		landId: 2, //地块ID 整型
					// 		plantId: 1, //种植方案ID 整型
					// 		taskId: 1, //任务ID 整型
					// 		taskDealId: 1, //任务处理ID 整型
					// 		materialId: '001', //物质ID 字符串
					// 		qty: 100, //投入量/投入时长 整型
					// 		price: 1500, //单价（单位:分） 整型
					// 		total: 150000, //总额（单位:分） 整型
					// 		durationUnit: 100, //投入时长单位（农机专用） 整型
					// 		materialType: 1, //物质分类ID 整型
					// 		materialTypeName: '农资', //物资分类名称 字符串
					// 		materialName: '物资001', //物资名称 字符串
					// 		model: '型号01', //型号 字符串
					// 		brand: '品牌01', //品牌 字符串
					// 		specs: 1, //规格（农资专用） 整型
					// 		meteringUnit: '农资单位', //计量单位（农资专用） 字符串
					// 		unit: 'unit', //计数单位 字符串
					// 		period: 10, //保质期（农资专用） 整型
					// 		periodUnit: '天', //保质期单位（农资专用） 字符串
					// 		supplier: '生产商01', //生产商 字符串
					// 		gmtCreate: '2021-06-23 16:20:09', //出库时间（yyyy-MM-dd HH:mm:ss） 日期
					// 		plantArea: 1.56 //种植面积 双精度
					// 	}
					// ];
					this.datas.forEach(m => {
						// 添加属性:总额的千分位计数字符串
						this.$set(m, 'total_price', this.$utils.priceFormat(m.total));
						// 添加属性(农资专用):单位的千分位计数字符串
						if (m.materialFlag === '1') this.$set(m, 'nz_unit', this.$utils.priceFormat(((m.specs * m.qty) / m.plantArea).toFixed(2)));
					});
				} else {
					this.$message({
						showClose: true,
						message: res.data.msg,
						type: 'error'
					});
				}
			});
		},
		// 设置请求参数
		getParams() {
			// 请求参数
			let params = {
				landId: this.landInfo.id
			};
			// 选择了日期
			if (this.dateArray && this.dateArray.length > 0) {
				if (this.dateArray[0]) Object.assign(params, { beginDate: this.dateArray[0] });
				if (this.dateArray[1]) Object.assign(params, { endDate: this.dateArray[1] });
			}
			console.log('投入明细请求参数', params);
			return params;
		}
	},
	async mounted() {
		// 地块详情
		this.landInfo = sessionStorage.getItem('massifDetails') && JSON.parse(sessionStorage.getItem('massifDetails'));
		console.log('地块信息', this.landInfo);
		// 地块成本汇总
		await this.getSummary();
		// 设置select默认选项
		this.selectValue = this.types[0].value;
		await this.getDatas();
	}
};
</script>

<style scoped>
.cost-block {
	padding: 12px 20px;
}
.card-img img {
	width: 100px;
	height: 100px;
}
.card-tag {
	background-color: #e3f4ee;
	color: #0e9c6b;
}
</style>
